import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { 
  Card, 
  List, 
  NavBar, 
  ProductCard, 
  Stepper, 
  SubmitBar, 
  Cell, 
  Field,
  Button
} from 'react-vant';
import { 
  ArrowRight, 
  ClockO, 
  FriendsO, 
  LocationO,
  GoldCoinO,
  ServiceO,
  EditO,
  VipCardO,
  WechatPay
} from '@react-vant/icons';
import './order.css';

export default function Order() {
    const location = useLocation();
    const navigate = useNavigate();
    const [orderInfo, setOrderInfo] = useState({
        diningTime: '2023-05-25 12:30',
        peopleCount: 6,
        tableLocation: '堂食餐-23号桌',
        serviceFee: 58,
        remark: '',
        isMember: false,
        payMethod: '微信支付'
    });
    
    const [foodList, setFoodList] = useState([]);
    
    useEffect(() => {
        console.log(location);
        if (location.state && location.state.list) {
            setFoodList(location.state.list);
        }
    }, [location]);
    
    // 计算总价
    const totalPrice = foodList.reduce((sum, item) => {
        return sum + item.price * item.num;
    }, 0) + orderInfo.serviceFee;
    
    // 更新商品数量
    const updateFoodCount = (index, value) => {
        const newList = [...foodList];
        newList[index].num = value;
        setFoodList(newList);
    };
    
    return (
        <div className="order-page">
            <NavBar
                className="foodtop"
                title="确认订单"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            
            <div className="order-content">
                {/* 食品列表 */}
                <Card round className="food-list-card">
                    {foodList.map((item, index) => (
                        <ProductCard
                            key={index}
                            price={item.price}
                            desc={item.name}
                            title=""
                            thumb={item.img}
                            num={
                                <Stepper
                                    value={item.num}
                                    onChange={(val) => updateFoodCount(index, val)}
                                    theme="round"
                                    buttonSize="18"
                                />
                            }
                        />
                    ))}
                </Card>
                
                {/* 订单信息 */}
                <Card round className="order-info-card">
                    <Cell 
                        icon={<ClockO />} 
                        title="就餐时间" 
                        value={orderInfo.diningTime}
                        isLink 
                        onClick={() => {}}
                    />
                    <Cell 
                        icon={<FriendsO />} 
                        title="就餐人数" 
                        value={`${orderInfo.peopleCount}人`}
                        isLink 
                        onClick={() => {}}
                    />
                    <Cell 
                        icon={<LocationO />} 
                        title="就餐位置" 
                        value={orderInfo.tableLocation}
                        isLink 
                        onClick={() => {}}
                    />
                    <Cell 
                        icon={<ServiceO />} 
                        title="服务费" 
                        value={`¥${orderInfo.serviceFee}`}
                    />
                </Card>
                
                {/* 其他选项 */}
                <Card round className="order-options-card">
                    <Cell 
                        icon={<EditO />} 
                        title="备注" 
                        value="请填写"
                        isLink 
                        onClick={() => {}}
                    />
                    <Cell 
                        icon={<VipCardO />} 
                        title="会员折扣" 
                        value="暂未开通会员"
                        isLink 
                        onClick={() => {}}
                    />
                    <Cell 
                        icon={<WechatPay />} 
                        title="支付方式" 
                        value={orderInfo.payMethod}
                        isLink 
                        onClick={() => {}}
                    />
                </Card>
                
                {/* 会员消费提示 */}
                <Cell
                    className="vip-tip-cell"
                    icon={<GoldCoinO color="#ff4d4f" />}
                    title={<span style={{ color: '#ff4d4f' }}>会员消费更优惠，餐饮低至5折！</span>}
                    isLink
                />
                
                {/* 用户协议 */}
                <div className="agreement">
                    <p>购买即表示同意 <a href="#">《恒心餐饮服务协议》</a></p>
                </div>
            </div>
            
            {/* 底部结算栏 */}
            <SubmitBar
                price={totalPrice * 100}  // 转换为分
                buttonText="立即支付"
                onSubmit={() => {
                    console.log('提交订单', foodList, orderInfo);
                }}
                tip={
                    <div className="price-detail">
                        <span className="total-price">¥{totalPrice.toFixed(2)}</span>
                        <span className="price-detail-btn">明细 <ArrowRight /></span>
                    </div>
                }
            />
        </div>
    );
}